<script setup>
import { NCarousel, NCarouselItem, NIcon, NNumberAnimation } from 'naive-ui'
import { ArrowBack, ArrowForward, CheckmarkSharp } from '@vicons/ionicons5'
import emitter from '@/utils/pubsub'

const { proxy } = getCurrentInstance()

const funIndex = ref(0)
const funList = [
  { index: 0, icon: '/images/icon/icon-guanli.png', title: '管理人员的指挥仓', description: '让数据可视化、让合同管理高效化让风险可控化' },
  { index: 1, icon: '/images/icon/icon-mendian.png', title: '门店运营的工作中心', description: '让运营流程高效化、让客户服务精准化、让资源配置最优化' },
  { index: 2, icon: '/images/icon/icon-caiwu.png', title: '财务中台的智慧管控', description: '让账务管理透明化、让收支流程自动化、让报表分析智能化' },
  { index: 3, icon: '/images/icon/icon-zuhu.png', title: '租户的舒适家园', description: '让租住体验便捷化、让服务响应迅速化、让社区生活智能化' }
]
const screenList = [
  [
    { style: 'plate-bg', pic: '/images/home/scene/plateBg.png', alt: '工作台' },
    { style: 'caiwu-pic', pic: '/images/home/scene/cwgl.png', alt: '财务管理' },
    { style: 'paiming-pic', pic: '/images/home/scene/cfpm.png', alt: '出房排名' },
    { style: 'hygl-pic', pic: '/images/home/scene/hygl.png', alt: '合约管理' }
  ],
  [
    { style: 'card21', pic: '/images/home/scene/card21.png', alt: '房源管理' },
    { style: 'card22', pic: '/images/home/scene/card22.png', alt: '租后服务' },
    { style: 'card23', pic: '/images/home/scene/card23.png', alt: '合约管理' },
    { style: 'card24', pic: '/images/home/scene/card24.png', alt: '线索管理' }
  ],
  [
    { style: 'card31', pic: '/images/home/scene/card31.png', alt: '财务管理' },
    { style: 'card32', pic: '/images/home/scene/card32.png', alt: '账单、催收、收款' },
    { style: 'card33', pic: '/images/home/scene/card33.png', alt: '数据分析' }
  ],
  [
    { style: 'card41', pic: '/images/home/scene/card41.png', alt: '合同' },
    { style: 'card42', pic: '/images/home/scene/card42.png', alt: '智能水表' },
    { style: 'card43', pic: '/images/home/scene/card43.png', alt: '智能门锁' },
    { style: 'card44', pic: '/images/home/scene/card44.png', alt: '智能电表' },
    { style: 'card45', pic: '/images/home/scene/card45.png', alt: '二维码' }
  ]
]

const activeCard = ref(0)
const currentIndex = ref(1)
const cardList = [
  { title: '政府保租房', subTitle: '高效租金管理', bylaws: ['提高租金管理效率', '优化房源配置', '提升住户保障'], pic: '/images/home/scene/bzf.png' },
  { title: '政府公租房', subTitle: '优化公租房管理', bylaws: ['提高租金管理效率', '优化房源使用', '提升住户满意度'], pic: '/images/home/scene/gongzufang.png' },
  { title: '人才公寓', subTitle: '吸引并留住人才', bylaws: ['专业租赁管理', '提供便捷服务', '增强人才吸引力'], pic: '/images/home/scene/rencaigongyu.png' },
  { title: '学生宿舍', subTitle: '高效管理学生宿舍', bylaws: ['高效宿舍管理', '提升学生生活质量', '优化宿舍资源配置'], pic: '/images/home/scene/xsss.png' },
  { title: '长租公寓', subTitle: '提升租赁稳定性', bylaws: ['高效房源管理', '优化租客服务', '提升租赁稳定性'], pic: '/images/home/scene/czgy.png' },
  { title: '服务式公寓', subTitle: '优化服务式公寓管理', bylaws: ['全方位租客服务', '提升运营效率', '优化客户体验'], pic: '/images/home/scene/fwgy.png' },
  { title: '短租民宿', subTitle: '灵活管理短租民宿', bylaws: ['灵活短租管理', '最大化空置期收益', '提升短租客体验'], pic: '/images/home/scene/dzms.png' },
  { title: '企业宿舍', subTitle: '提升员工住宿体验', bylaws: ['优化宿舍管理', '提升员工满意度', '降低管理成本'], pic: '/images/home/scene/qyss.png' },
  { title: '企业园区', subTitle: '优化园区资源管理', bylaws: ['高效管理，优化资源', '提供优质园区服务', '助力企业发展'], pic: '/images/home/scene/qyyq.png' }
]
// 下一页函数，如果当前索引小于7，则增加当前索引
function nextPage() {
  if (currentIndex.value < 7) {
    currentIndex.value = currentIndex.value + 3
  }
}
// 上一页函数，如果当前索引大于1，则减少当前索引
function prevPage() {
  if (currentIndex.value > 1) {
    currentIndex.value = currentIndex.value - 3
  }
}

const isShow = ref(true)
let count = 0
let countTimer = null

function startCalculagraph() {
  countTimer = setInterval(() => {
    count += 1
    if (count === 7) {
      isShow.value = false
    }
    if (count === 8) {
      isShow.value = true
      count = 0
    }
  }, 1000)
}

// 切换屏幕
function toggleScreen(index) {
  countTimer && clearInterval(countTimer)
  count = 0
  isShow.value = false
  nextTick(() => {
    funIndex.value = index
    isShow.value = true
    startCalculagraph()
  })
}

onMounted(() => {
  startCalculagraph()
  emitter.on('observe-view', entry => {
    if (entry.target.id === 'sceneRef') {
      listenView(entry)
    }
  })
})
onUnmounted(() => {
  countTimer && clearInterval(countTimer)
})

const showView = ref(false) // 显示动画

function listenView(entry) {
  if (entry.isIntersecting && entry.boundingClientRect.top > 350) {
    proxy.$refs.oneRef?.play()
    proxy.$refs.twoRef?.play()
    proxy.$refs.threeRef?.play()
    proxy.$refs.fourRef?.play()
    showView.value = true
  } else {
    showView.value = false
  }
}
</script>

<template>
  <article class="w-full mt-180px">
    <section class="w-1200px flex justify-between items-center mx-auto">
      <div class="text-size-44px font-medium pingfang-sc">丰富多样的应用场景</div>
      <div class="flex justify-between text-size-36px cursor-pointer">
        <NIcon :class="currentIndex < 2 ? 'text-gray-400 cursor-not-allowed' : ''" @click="prevPage"><ArrowBack /></NIcon>
        <NIcon class="ml-30px" :class="currentIndex > 6 ? 'text-gray-400 cursor-not-allowed' : ''" @click="nextPage"><ArrowForward /></NIcon>
      </div>
    </section>
    <section class="w-full pt-118px pb-49px">
      <div class="w-full overflow-hidden box-border">
        <NCarousel :space-between="24" :loop="false" slides-per-view="auto" :show-arrow="false" :show-dots="false" centered-slides :current-index="currentIndex">
          <NCarouselItem v-for="(item, index) in cardList" :key="index" style="width: 372px">
            <div class="relative w-372px h-400px bg-white select-none rounded-16px mr-24px overflow-hidden cursor-pointer" @mouseover="activeCard = index">
              <img class="w-372px h-132px z-1" :alt="item.title" :src="item.pic" style="border-radius: 16px 16px 0 0" />
              <div class="w-full h-400px absolute left-0 top-0 z-10 px-32px pt-32px" :class="activeCard === index ? 'active-card' : 'scene-card'">
                <h4 class="h-45px leading-45px text-size-32px font-medium">{{ item.title }}</h4>
                <p class="text-size-20px leading-28px mt-10px">{{ item.subTitle }}</p>
                <div class="w-220px h-1px mt-30px" :class="activeCard === index ? 'active' : 'hide'" style="background: linear-gradient(138deg, #ff6fab 0%, #4586ff 100%)"></div>
                <ul class="mt-36px" :class="activeCard === index ? 'active' : 'hide'">
                  <li class="text-size-18px leading-25px">
                    <NIcon class="text-size-14px text-hex-0A87F8"><CheckmarkSharp /></NIcon>
                    <span class="ml-6px">{{ item.bylaws[0] }}</span>
                  </li>
                  <li class="text-size-18px mt-8px leading-25px">
                    <NIcon class="text-size-14px text-hex-0A87F8"><CheckmarkSharp /></NIcon>
                    <span class="ml-6px">{{ item.bylaws[1] }}</span>
                  </li>
                  <li class="text-size-18px mt-8px leading-25px">
                    <NIcon class="text-size-14px text-hex-0A87F8"><CheckmarkSharp /></NIcon>
                    <span class="ml-6px">{{ item.bylaws[2] }}</span>
                  </li>
                </ul>
                <div class="flex justify-between mt-52px" :class="activeCard === index ? 'active' : 'hide'">
                  <NuxtLink to="https://saas.byteox.com/#/login" class="scene-btn text-white" style="background: linear-gradient(135deg, #0a87f8 0%, #1456f0 100%)">免费试用</NuxtLink>
                  <NuxtLink class="scene-btn text-hex-0A87F8 border-hex-0A87F8 border-solid border-1px">预约演示</NuxtLink>
                </div>
              </div>
              <NIcon v-show="activeCard !== index" class="absolute left-36px bottom-30px text-size-26px text-gray-400 z-20"><ArrowForward /></NIcon>
            </div>
          </NCarouselItem>
        </NCarousel>
      </div>
    </section>
    <div class="scene-box pt-220px">
      <section class="w-1200px mx-auto">
        <h2 class="text-size-44px leading-62px text-center">帮您解决住房租赁运营难题</h2>
        <div id="sceneRef" class="observe-view w-full flex h-160px justify-between items-center rounded-t-16px mt-80px">
          <div class="flex flex-col justify-center ml-90px">
            <div class="flex h-57px items-center">
              <div class="percentum"><NNumberAnimation ref="oneRef" :from="0" :to="70" /></div>
              <img class="w-30px h-39px mt-6px" src="/public/images/icon/up-arrow.png" alt="运营效率" />
            </div>
            <div class="text-hex-333 text-center font-medium text-size-14px">运营效率</div>
          </div>
          <div class="flex flex-col justify-center">
            <div class="flex h-57px items-center">
              <div class="percentum"><NNumberAnimation ref="twoRef" :from="0" :to="30" /></div>
              <img class="w-30px h-39px mt-6px" src="/public/images/icon/up-arrow.png" alt="运营效率" />
            </div>
            <div class="text-hex-333 text-center font-medium text-size-14px">客户拉新留存</div>
          </div>
          <div class="flex flex-col justify-center">
            <div class="flex h-57px items-center">
              <div class="percentum"><NNumberAnimation ref="threeRef" :from="100" :to="50" /></div>
              <img class="w-30px h-39px mt-6px" src="/public/images/icon/down-arrow.png" alt="运营效率" />
            </div>
            <div class="text-hex-333 text-center font-medium text-size-14px">管理成本</div>
          </div>
          <div class="flex flex-col justify-center">
            <div class="flex h-57px items-center">
              <div class="percentum"><NNumberAnimation ref="fourRef" :from="100" :to="35" /></div>
              <img class="w-30px h-39px mt-6px" src="/public/images/icon/down-arrow.png" alt="运营效率" />
            </div>
            <div class="text-hex-333 text-center font-medium text-size-14px">客户投诉</div>
          </div>
          <NuxtLink to="https://saas.byteox.com/#/login" class="scene-btn text-white mr-80px" style="background: linear-gradient(135deg, #0a87f8 0%, #1456f0 100%)">免费试用</NuxtLink>
        </div>
        <div class="mt-50px">
          <div class="flex justify-between px-50px">
            <img class="w-260px h-60px" :class="showView ? 'aside-left' : ''" src="/public/images/home/scene/jjnt.png" alt="解决运营难题" />
            <img class="w-260px h-60px" :class="showView ? 'aside-right' : ''" src="/public/images/home/scene/yhfa.png" alt="优化解决方案" />
          </div>
          <div class="flex w-1200px justify-center overflow-hidden mt-69px">
            <div class="flex-1 relative overflow-visible">
              <div class="absolute left-5px top-0 py-26px" :class="showView ? 'aside-left' : ''">
                <div class="flex items-center pingfang-sc">
                  <div class="w-94px h-94px text-center leading-94px round-l">80%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">营销获客</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">多渠道分发，精准线索跟踪，降低获客成本</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-l">90%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">实时房态</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">空置、配置、已租、预到期智能提醒预警</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-l">85%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">租约管控</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">预约、预定、签约、入住、退转换续全流程管</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-l">95%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">账单管理</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">账单、流水、收据、发票全周期管控</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-562px h548px" :class="showView ? 'center-up' : ''">
              <img class="w-full h-full" :class="showView ? 'center-up' : ''" src="/public/images/home/scene/mote.png" alt="帮您解决住房租赁运营难题" />
            </div>
            <div class="flex-1 relative overflow-visible">
              <div class="absolute left-0 top-0 py-26px" :class="showView ? 'aside-right' : ''">
                <div class="flex items-center pingfang-sc">
                  <div class="w-94px h-94px text-center leading-94px round-r">100%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">工单服务</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">维修、保洁、投诉、工单评价全链路服务</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-r">100%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">智能物联</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">门锁、水电表、监控、烟杆互联互通</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-r">100%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">资产风控</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">资产盘点、风险预估、增长预测</div>
                  </div>
                </div>
                <div class="flex items-center pingfang-sc mt-40px">
                  <div class="w-94px h-94px text-center leading-94px round-r">100%</div>
                  <div class="ml-17px">
                    <div class="text-size-22px text-hex-3271FF">数据驱动</div>
                    <div class="w-200px h-56px mt-10px leading-28px text-size-18px text-hex-333 font-normal">BI大屏、数据决策、开放平台</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <img class="w-324px h-493px" :class="showView ? 'aside-left' : ''" src="/public/images/home/scene/aside-left.png" alt="帮您解决住房租赁运营难题">
            <img class="w-360px h-523px mx-26px" :class="showView ? 'center-up' : ''" src="/public/images/home/scene/mote.png" alt="帮您解决住房租赁运营难题" />
            <img class="w-324px h-493px" :class="showView ? 'aside-right' : ''" src="/public/images/home/scene/aside-right.png" alt="优化解决方案"> -->
          </div>
          <!-- <div class="w-1200px h-584px mt-69px" :class="showView ? 'center-up' : ''">
            <img class="w-full h-584px mx-auto" src="/images/home/scene/yyntmain.png" alt="帮您解决住房租赁运营难题" />
          </div> -->
        </div>
      </section>
      <!-- 助力团队中的每个角色发挥最大效能  -->
      <section class="w-full mt-171px">
        <h2 class="text-size-44px leading-62px text-center">助力团队中的每个角色发挥最大效能</h2>
        <div class="w-1200px flex justify-center items-start mt-86px mx-auto">
          <div class="w-320px">
            <div
              v-for="item in funList"
              :key="item.index"
              class="cursor-pointer"
              :class="[funIndex === item.index ? 'fun-over' : '', item.index > 0 ? 'mt-48px' : '']"
              @click="toggleScreen(item.index)"
            >
              <div class="flex items-center group">
                <img class="w-32px h-32px" :src="item.icon" :alt="item.title" />
                <span class="text-size-20px font-medium ml-8px group-hover:(text-hex-3271FF)" :class="funIndex === item.index ? 'text-hex-3271FF' : ''">{{ item.title }}</span>
              </div>
              <p v-if="funIndex === item.index" class="text-hex-777 leading-25px mp-13px">{{ item.description }}</p>
            </div>
            <div class="flex justify-between mt-60px">
              <NuxtLink to="https://saas.byteox.com/#/login" class="full-btn w-152px h-50px leading-50px rounded-8px">免费试用</NuxtLink>
              <NuxtLink class="ghost-btn w-152px h-50px leading-50px rounded-8px">预约演示</NuxtLink>
            </div>
          </div>
          <div class="w-766px h-500px ml-114px rounded-16px overflow-hidden" style="background: linear-gradient(230deg, #afcdff 0%, #f0f4ff 100%)">
            <div v-if="isShow" class="screen">
              <img v-for="(item, index) in screenList[funIndex]" :key="index" :class="item.style" :src="item.pic" :alt="item.alt" />
            </div>
          </div>
        </div>
      </section>
    </div>
  </article>
</template>

<style scoped>
#sceneRef {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
  border-radius: 16px 16px 0 0;
}
.scene-box {
  background: url('/public/images/home/scene/scene-bg.png') no-repeat 0 0;
  background-size: 100% 1600px;
}
.round-l {
  background: url('/public/images/home/scene/round-l.png') no-repeat 0 0;
  background-size: 100% 100%;
}
.round-r {
  background: url('/public/images/home/scene/round-r.png') no-repeat 0 0;
  background-size: 100% 100%;
}
.scene-btn {
  width: 140px;
  height: 50px;
  font-weight: 500;
  font-size: 18px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

@keyframes left-animation {
  0% {
    opacity: 0;
    transform: translateX(-350px);
  }
  50% {
    opacity: 0.4;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes right-animation {
  0% {
    opacity: 0;
    transform: translateX(350px);
  }
  50% {
    opacity: 0.4;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes center-animation {
  0% {
    opacity: 0;
    transform: translateY(500px);
  }
  50% {
    opacity: 0.4;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.aside-left {
  animation: left-animation 1.2s ease-out 0s 1 normal forwards;
}
.aside-right {
  animation: right-animation 1.2s ease-out 0s 1 normal forwards;
}
.center-up {
  animation: center-animation 1.2s ease-out 0s 1 normal forwards;
}

@variants hover, active {
  .scene-btn {
    @apply opacity-80;
  }
}
.scene-card {
  cursor: pointer;
  transform: translateY(132px);
  background: linear-gradient(135deg, #eaeaef 0%, #f3f3f8 45%, #ebedfa 74%, #e6e8fa 100%);
  transition: all 0.5s;
}
.active-card {
  cursor: pointer;
  background: linear-gradient(135deg, #eaeaef 0%, #f3f3f8 45%, #ebedfa 74%, #e6e8fa 100%);
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  transform: translateY(0px);
  transition: all 0.5s;
}

@keyframes screen-animation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0.2;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  animation: screen-animation 1s ease-out 6s 1 normal none;
}

@keyframes first-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes left-move {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: translateX(-400px) scale(0.4);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes top-move {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: translateY(300px) scale(0.4);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes right-move {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: translateX(300px) scale(0.4);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.hygl-pic {
  @apply w-323px h-167px absolute right-26px top-138px z-10 opacity-0;
  animation: right-move 1s ease-out 3s 1 normal forwards;
}
.plate-bg {
  position: absolute;
  top: -14px;
  left: 40px;
  width: 712px;
  height: 485px;
  z-index: 0;
  animation: first-animation 1s ease-out 0s 1 normal forwards;
}

.caiwu-pic {
  opacity: 0;
  position: absolute;
  left: 30px;
  bottom: 86px;
  z-index: 5;
  width: 301px;
  height: 182px;
  animation: left-move 1s ease-out 1s 1 normal forwards;
}

.paiming-pic {
  opacity: 0;
  position: absolute;
  left: 272px;
  bottom: 27px;
  z-index: 10;
  width: 256px;
  height: 173px;
  animation: top-move 1s ease-out 2s 1 normal forwards;
}
.card21 {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 706px;
  height: 465px;
  opacity: 0;
  animation: first-animation 1s ease-out 0s 1 normal forwards;
}
.card22 {
  position: absolute;
  right: 57px;
  top: 25px;
  width: 300px;
  height: 181px;
  opacity: 0;
  animation: right-move 1s ease-out 1s 1 normal forwards;
}
.card23 {
  position: absolute;
  left: 23px;
  bottom: 62px;
  width: 322px;
  height: 166px;
  opacity: 0;
  animation: left-move 1s ease-out 2s 1 normal forwards;
}
.card24 {
  position: absolute;
  right: 31px;
  bottom: 43px;
  width: 371px;
  height: 261px;
  opacity: 0;
  animation: top-move 1s ease-out 3s 1 normal forwards;
}

.card31 {
  position: absolute;
  left: -32px;
  top: -19px;
  width: 760px;
  height: 439px;
  opacity: 0;
  animation: first-animation 1s ease-out 0s 1 normal forwards;
}
.card32 {
  position: absolute;
  left: 27px;
  bottom: 32px;
  width: 442px;
  height: 99px;
  opacity: 0;
  animation: left-move 1s ease-out 1s 1 normal forwards;
}
.card33 {
  position: absolute;
  right: 34px;
  top: 105px;
  width: 325px;
  height: 329px;
  opacity: 0;
  animation: right-move 1s ease-out 2s 1 normal forwards;
}

.card41 {
  position: absolute;
  left: -8px;
  top: -21px;
  width: 760px;
  height: 439px;
  opacity: 0;
  animation: first-animation 1s ease-out 0s 1 normal forwards;
}
.card42 {
  position: absolute;
  right: 38px;
  top: 81px;
  width: 275px;
  height: 181px;
  opacity: 0;
  animation: right-move 1s ease-out 4s 1 normal forwards;
}
.card43 {
  position: absolute;
  left: 35px;
  bottom: 51px;
  width: 275px;
  height: 181px;
  opacity: 0;
  animation: left-move 1s ease-out 1s 1 normal forwards;
}
.card44 {
  position: absolute;
  right: 145px;
  bottom: 38px;
  width: 275px;
  height: 181px;
  opacity: 0;
  animation: top-move 0.8s ease-out 2s 1 normal forwards;
}
.card45 {
  position: absolute;
  right: 73px;
  bottom: 102px;
  width: 59px;
  height: 84px;
  opacity: 0;
  animation: right-move 1s ease-out 3s 1 normal forwards;
}

.percentum {
  width: 80px;
  text-align: left;
  @apply relative text-size-48px font-bold;
}
.percentum::after {
  position: absolute;
  content: '%';
  bottom: 0;
  right: 0;
  font-size: 24px;
}

.fun-over {
  position: relative;
  width: 320px;
  height: 135px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  padding: 19px 30px 20px 20px;
  cursor: pointer;
}
.fun-over::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 4px;
  height: 135px;
  background: linear-gradient(135deg, #0a87f8 0%, #1456f0 100%);
  border-radius: 4px 0 0 4px;
}

.active {
  opacity: 1;
  transition: all 0.25s;
}
.hide {
  opacity: 0;
  transition: all 0.25s;
}
</style>
